<!--
  忘记密码
  wdz
  2019年12月23日
-->

<template lang="pug">
  div.forget
    div.main-content
      h1 忘记密码
      el-form(label-position="right" label-width="110px" :model="formModel" :rules="rules" ref="formModel")
        el-form-item(label="学号：" prop="studentId")
          el-input(v-model="formModel.studentId" @blur="getEmail")
        el-form-item(label="邮箱：" prop="email")
          el-input(v-model="formModel.email" readonly)
        el-form-item(label="邮箱验证码：" prop="emailCode")
          el-input.code-input(v-model="formModel.emailCode")
          p(@click="sendCode") 发送验证码
        el-form-item(label="设置新密码：" prop="password")
          el-input(v-model="formModel.password" type="password")
        el-form-item(label="确认新密码：" prop="passwordAgain")
          el-input(v-model="formModel.passwordAgain" type="password" @keyup.enter.native="determine")
        el-form-item
          el-button.Determine(type="primary" @click="determine('formModel')") 确定
    div.footer
</template>

<script>
  // import Login from '../../api/login'

  export default {
    name: 'index',
    data() {
      // 两次输入密码是否一致验证
      let validatePasswordAgain = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请再次输入密码'))
        } else {
          if (this.formModel.passwordAgain !== this.formModel.password) {
            callback(new Error('两次输入密码不一致，请重新输入'))
          }
          callback()
        }
      }
      // 邮箱验证码验证
      let validateCode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入验证码'))
        } else {
          if (this.formModel.emailCode !== this.actCode) {
            callback(new Error('验证码输入有误，请重新输入'))
          }
          callback()
        }
      }
      return {
        formModel: { // 表单数据
          studentId: null,
          email: '',
          emailCode: '',
          password: '',
          passwordAgain: ''
        },
        rules: { // 表单验证规则
          studentId: [{required: true, message: '请输入学号', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}],
          passwordAgain: [{required: true, validator: validatePasswordAgain, trigger: 'blur'}],
          emailCode: [{required: true, validator: validateCode, trigger: 'blur'}]
        },
        actCode: '', // 邮箱验证码
        id: null // 用户ID
      }
    },
    mounted() {
      // this.autoLogin()
    },
    methods: {
      // autoLogin() {
      //   let username = 'admin'
      //   let password = '123'
      //   Login.remoteLogin({
      //     'username': username,
      //     'password': password
      //   }).then(data => {
      //     if (data.success) {
      //       window.sessionStorage.setItem('access_token', data.access_token)
      //       window.sessionStorage.setItem('user_token', data.user.token)
      //       console.log('---access_token----', data.access_token)
      //       console.log('---user_token----', data.user.token)
      //       // 在缓存中记录最后登录时间，处理单用户登录需求
      //       // this.getOutLine()
      //     } else {
      //       this.$KalixMessage.error(data.message)
      //     }
      //   }).catch(err => {
      //     console.log('err', err)
      //   })
      // },
      // 发送验证码
      sendCode() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/mplive/mail/getsendMail',
          params: {
            receive: this.formModel.email
          }
        }).then(res => {
          let _data = res.data
          console.log('------code------', _data)
          this.actCode = _data
        })
      },
      // 输入用户ID获取用户邮箱
      getEmail() {
        if (this.formModel.studentId) {
          this.$http.request({
            method: 'GET',
            url: '/camel/rest/mplive/assessmentPlans/getStudentId',
            params: {
              studentId: this.formModel.studentId
            }
          }).then(res => {
            let _data = res.data.data[0]
            console.log('------personalData------', _data.email)
            this.formModel.email = _data.email
            this.id = _data.uid
          })
        }
      },
      // 确定修改密码
      determine(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.request({
              method: 'PUT',
              url: '/camel/rest/users/' + this.id,
              data: {
                password: this.formModel.newPassword
              }
            }).then(res => {
              this.$message({
                message: '密码修改成功',
                type: 'success'
              })
              this.$router.push({path: '/login'})
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

<style scoped lang="stylus">
  .forget
    width 100%
    height 829px
    position relative
    .main-content
      width 1000px
      margin 0 auto
      h1
        width 400px
        margin 140px auto 80px auto
      .el-form
        width 400px
        margin 0 auto
        margin-bottom 20px
        .el-form-item
          margin-bottom 20px
          .code-input
            width 187px
          p
            line-height 32px
            display inline-block
            margin-left 33px
            font-size 14px
            color #25a9e1
            cursor pointer
          .Determine
            width 120px
            margin-left 85px
    .footer
      background url("/static/img/bg1.png") center center no-repeat
      background-position 0 0
      background-size 1920px 428px
      width 100%
      height 428px
      position absolute
      bottom 0
      z-index -1
</style>
